<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,h1,h2,p,span,a{
            outline: 1px red solid;
        }
    </style>
</head>
<body>
    <div id='out'>
        <h1>h1的内容</h1>
        <h2>h2的内容</h2>
        <p>这是段落1的内容</p>
        <div>
            <p>设置段落2的类容</p>
            <div>
                <span>span的内容</span>
                <a href="">百度一下</a>
            </div>
            <div>
                <ul>
                    <li>列表元素1</li>
                    <li>列表元素2</li>
                    <li>列表元素3</li>
                    <li>列表元素4</li>
                </ul>
            </div>
        </div>
</div>
   
</body>
</html>
<script>
  /*
     事件源: 事件发生的源头
   
     事件源是巧妙的运用了事件流来完成的。

    js中事件委托的原理就是 ： 事件源 + 事件流
  */

   let outdivObj = document.getElementById('out');

   outdivObj.onclick=function(){

       console.log('1111')
   }
    


</script>